<template>
    <el-card shadow="never" class="border-0">
      <!-- 新增|刷新 -->
      <ListHeader @create="handleCreate" @refresh="getTableData" />
  
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="名称" width="300">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ row.name }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="编码" width="200">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="ml-3">
                <h6>{{ row.code }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="作者" width="200">
          <template #default="{ row }">
            {{ row.author }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="200">
          <template #default="{ row }">
            {{ row.createUser }}
          </template>
        </el-table-column>
        <el-table-column label="是否开启" width="120">
          <template #default="{ row }">
            <el-switch :modelValue="row.status" :active-value="1" :inactive-value="0" :loading="row.statusLoading"
              :disabled="row.super == 1" @change="handleStatusChange(row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <div>
              <el-button type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
  
              <el-popconfirm title="是否要删除该数据源？" confirmButtonText="确认" cancelButtonText="取消"
                @confirm="handleDelete(scope.row.id)">
                <template #reference>
                  <el-button text type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="total,prev, pager ,next" 
        :total="pageTotal" v-model:value="current" :page-size="pageSize"
          @current-change="handleCurrentChange" />
      </div>
  
      <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
        <el-form :model="form" ref="formRef" label-width="80px" :inline="false">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="名称" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="编码" prop="code">
            <el-input v-model="form.code" placeholder="编码" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="bean名称" prop="beanName">
            <el-input v-model="form.beanName" placeholder="bean名称" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input v-model="form.author" placeholder="作者" style="width: 300px;"></el-input>
          </el-form-item>
        </el-form>
      </FormDrawer>
  
    </el-card>
  </template>
  <script setup>
  import { ref, onMounted, computed } from "vue"
  import FormDrawer from "~/components/FormDrawer.vue";
  import { toast } from '~/composables/utils'
  import {
    getSignPageList,
    getSignDetail,
    removeSign,
    savaSign,
    updateSign,
    updateSignStatus
  } from "~/api/datasource"
  import ListHeader from '~/components/ListHeader.vue';
  const loading = ref(true)

  const tableData = ref([]);

  const current = ref(1);
  const pageSize = ref(20);
  const pageTotal = ref(0);
 
//初始化列表信息
const getTableData = () => {
    loading.value = true
    getSignPageList({current: current.value,pageSize: pageSize.value}).then((res) => {
        tableData.value = res.records
        pageTotal.value = Number(res.total)
        loading.value = false
    })
}

const handleCurrentChange = (newPage) => {
  current.value = newPage;
  getTableData();
}

//修改状态
const handleStatusChange = (updateStatusParam) => {
    //进行修改
    const status = updateStatusParam.status===1 ? 0 : 1;
    const id = updateStatusParam.id;
    console.log(status);
    updateSignStatus(id, status).then((res) => {
        updateStatusParam.status = status;
    });
}

//删除
const handleDelete = (id) => {
  removeSign([id]).then((res) => {
        getTableData();
        toast("删除成功！")
    });
}

const formDrawerRef = ref(null)
const formRef = ref(null)
const defaultForm = {}
const form = ref({})//列表信息
const rules = {}
const drawerTitle = computed(() => isEdit.value ? "修改" : "新增")
const isEdit = ref(false)

//新增
const handleCreate = () => {
    //修改为新增
    isEdit.value = false
    //清空表单内容
    form.value = {}
    formDrawerRef.value.open()
}

//编辑
const handleEdit = (row) => {
    isEdit.value = true
    //根据id获取表单信息
    getSignDetail(row.id).then((res) => {
        form.value = res
        console.log(form)
        formDrawerRef.value.open()
    })
}

const handleSubmit = () =>{
    formRef.value.validate((valid) => {
        if (!valid) return

        formDrawerRef.value.showLoading()

        const fun = () => {
            toast(drawerTitle.value + "成功")
            // 修改刷新当前页，新增刷新第一页
            current.value = 1
            getTableData()
            formDrawerRef.value.close()
        };
       
        if (isEdit.value) {
            updateSign(form.value).then((res) =>{
                fun();
            }).finally(() => {
                formDrawerRef.value.hideLoading()
            })
        }else{
            savaSign(form.value).then((res) => {
                fun();
            }).finally(() => {
                formDrawerRef.value.hideLoading()
            })
        }
    })
}

onMounted(async () => {
  try {
    getTableData();
  } catch (error) {
    console.error(error);
  }
});
</script>